/**
* Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community
* Edition) available.
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
* Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://opensource.org/licenses/MIT
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
<template>
    <div class="task-container">
        <div class="task-create-method-tabs">
            <div
                v-for="method in createMethodTabs"
                :class="['create-method-tab-item', { active: crtCreateMethodTab === method.id }]"
                :key="method.id"
                @click="handleCreateMethodTabClick(method.id)">
                {{ method.name }}
            </div>
        </div>
        <div class="task-content-wrapper">
            <skeleton :loading="firstLoading" loader="taskList">
                <div class="list-wrapper">
                    <advance-search-form
                        id="taskList"
                        :open="isSearchFormOpen"
                        :search-config="{ placeholder: $t('请输入任务名称'), value: requestData.taskName }"
                        :search-form="searchForm"
                        @onSearchInput="onSearchInput"
                        @submit="onSearchFormSubmit">
                        <template v-slot:operation>
                            <bk-button
                                theme="primary"
                                style="min-width: 120px;"
                                data-test-id="taskList_form_createTask"
                                @click="onCreateTask">
                                {{$t('新建')}}
                            </bk-button>
                        </template>
                    </advance-search-form>
                    <div class="task-table-content" data-test-id="taskList_table_taskList">
                        <bk-table
                            :data="taskList"
                            :pagination="pagination"
                            :size="setting.size"
                            v-bkloading="{ isLoading: !firstLoading && listLoading, opacity: 1, zIndex: 100 }"
                            @page-change="onPageChange"
                            @page-limit-change="onPageLimitChange">
                            <bk-table-column
                                v-for="item in setting.selectedFields"
                                :key="item.id"
                                :label="item.label"
                                :prop="item.id"
                                :render-header="renderTableHeader"
                                :width="item.width"
                                :min-width="item.min_width">
                                <template slot-scope="props">
                                    <!--任务名称-->
                                    <div v-if="item.id === 'name'">
                                        <a
                                            v-if="!hasPermission(['task_view'], props.row.auth_actions)"
                                            v-cursor
                                            class="text-permission-disable"
                                            :title="props.row.name"
                                            @click="onTaskPermissonCheck(['task_view'], props.row)">
                                            {{props.row.name}}
                                        </a>
                                        <router-link
                                            v-else
                                            class="template-operate-btn"
                                            :title="props.row.name"
                                            :to="{
                                                name: 'taskExecute',
                                                params: { project_id: project_id },
                                                query: { instance_id: props.row.id }
                                            }">
                                            {{props.row.name}}
                                        </router-link>
                                    </div>
                                    <!--创建方式-->
                                    <div v-else-if="item.id === 'create_method'">
                                        {{ transformCreateMethod(props.row.create_method) }}
                                    </div>
                                    <!--状态-->
                                    <div v-else-if="item.id === 'task_status'" class="task-status">
                                        <span :class="executeStatus[props.$index] && executeStatus[props.$index].cls"></span>
                                        <span v-if="executeStatus[props.$index]" class="task-status-text">{{executeStatus[props.$index].text}}</span>
                                    </div>
                                    <!-- 其他 -->
                                    <template v-else>
                                        <span :title="props.row[item.id] || '--'">{{ props.row[item.id] || '--' }}</span>
                                    </template>
                                </template>
                            </bk-table-column>
                            <bk-table-column :label="$t('操作')" width="190">
                                <template slot-scope="props">
                                    <div class="task-operation">
                                        <!-- 事后鉴权，后续对接新版权限中心 -->
                                        <a v-if="props.row.template_deleted || props.row.template_source === 'onetime'" class="task-operation-btn disabled" data-test-id="taskList_table_recreateBtn">{{$t('再创建')}}</a>
                                        <a
                                            v-else-if="!hasCreateTaskPerm(props.row)"
                                            v-cursor
                                            class="text-permission-disable task-operation-btn"
                                            data-test-id="taskList_table_recreateBtn"
                                            @click="onTaskPermissonCheck([props.row.template_source === 'project' ? 'flow_create_task' : 'common_flow_create_task'], props.row)">
                                            {{$t('再创建')}}
                                        </a>
                                        <a
                                            v-else
                                            class="task-operation-btn"
                                            data-test-id="taskList_table_recreateBtn"
                                            @click="getCreateTaskUrl(props.row)">
                                            {{$t('再创建')}}
                                        </a>
                                        <a
                                            v-cursor="{ active: !hasPermission(['task_clone'], props.row.auth_actions) }"
                                            :class="['task-operation-btn', {
                                                'text-permission-disable': !hasPermission(['task_clone'], props.row.auth_actions)
                                            }]"
                                            href="javascript:void(0);"
                                            data-test-id="taskList_table_cloneBtn"
                                            @click="onCloneTaskClick(props.row, $event)">
                                            {{ $t('克隆') }}
                                        </a>
                                        <a
                                            v-cursor="{ active: !hasPermission(['task_delete'], props.row.auth_actions) }"
                                            :class="['task-operation-btn', {
                                                'text-permission-disable': !hasPermission(['task_delete'], props.row.auth_actions)
                                            }]"
                                            href="javascript:void(0);"
                                            data-test-id="taskList_table_deleteBtn"
                                            @click="onDeleteTask(props.row, $event)">
                                            {{ $t('删除') }}
                                        </a>
                                    </div>
                                </template>
                            </bk-table-column>
                            <bk-table-column type="setting">
                                <bk-table-setting-content
                                    :fields="setting.fieldList"
                                    :selected="setting.selectedFields"
                                    :size="setting.size"
                                    @setting-change="handleSettingChange">
                                </bk-table-setting-content>
                            </bk-table-column>
                            <div class="empty-data" slot="empty"><NoData :message="$t('无数据')" /></div>
                        </bk-table>
                    </div>
                </div>
            </skeleton>
        </div>
        <TaskCreateDialog
            :entrance="'taskflow'"
            :project_id="project_id"
            :is-new-task-dialog-show="isNewTaskDialogShow"
            :business-info-loading="businessInfoLoading"
            :task-category="taskCategory"
            @onCreateTaskCancel="onCreateTaskCancel">
        </TaskCreateDialog>
        <TaskCloneDialog
            :is-task-clone-dialog-show="isTaskCloneDialogShow"
            :task-name="theCloneTaskName"
            :pending="pending.clone"
            @confirm="onCloneConfirm"
            @cancel="onCloneCancel">
        </TaskCloneDialog>
        <bk-dialog
            width="400"
            ext-cls="common-dialog"
            :theme="'primary'"
            :mask-close="false"
            :header-position="'left'"
            :title="$t('删除')"
            :value="isDeleteDialogShow"
            @confirm="onDeleteConfirm"
            @cancel="onDeleteCancel">
            <div class="dialog-content" v-bkloading="{ isLoading: pending.delete, opacity: 1, zIndex: 100 }">
                {{$t('确认删除') + '"' + theDeleteTaskName + '"?'}}
            </div>
        </bk-dialog>
        <bk-dialog
            width="480"
            ext-cls="recreate-dialog"
            :value="isCreateDialogShow"
            theme="primary"
            :mask-close="false"
            :header-position="'left'"
            :title="$t('再创建')"
            :ok-text="$t('再创建')"
            @confirm="onCreateConfirm"
            @cancel="isCreateDialogShow = false">
            <bk-alert type="info" :title="$t('使用流程的最新数据再次创建任务，可重用当前参数')"></bk-alert>
            <bk-radio-group v-model="paramsType">
                <bk-radio :value="'default'">{{ $t('使用流程默认参数值') }}</bk-radio>
                <bk-radio :value="'reuse'">
                    {{ $t('重用当前任务参数值') }}
                    <bk-popover placement="bottom-end" theme="light" width="344" :ext-cls="'reuse-rule-tip'">
                        <i class="bk-icon icon-question-circle"></i>
                        <div slot="content">
                            <p class="mb10">{{ $t('以下情况参数值无法重用，使用变量默认值：') }}</p>
                            <p>{{ '1. ' + $t('变量的类型变更') }}</p>
                            <p>{{ '2. ' + $t('变量默认值的字段增减') }}</p>
                            <p>{{ '3. ' + $t('下拉框、表格类型变量的配置变更') }}</p>
                        </div>
                    </bk-popover>
                </bk-radio>
            </bk-radio-group>
        </bk-dialog>
    </div>
</template>
<script>
    import i18n from '@/config/i18n/index.js'
    import { mapState, mapMutations, mapActions } from 'vuex'
    import toolsUtils from '@/utils/tools.js'
    import AdvanceSearchForm from '@/components/common/advanceSearchForm/index.vue'
    import TaskCreateDialog from './TaskCreateDialog.vue'
    import NoData from '@/components/common/base/NoData.vue'
    import moment from 'moment-timezone'
    import TaskCloneDialog from './TaskCloneDialog.vue'
    import Skeleton from '@/components/skeleton/index.vue'
    import permission from '@/mixins/permission.js'
    import task from '@/mixins/task.js'
    const SEARCH_FORM = [
        {
            type: 'dateRange',
            key: 'executeTime',
            placeholder: i18n.t('选择日期时间范围'),
            label: i18n.t('执行开始'),
            value: ['', '']
        },
        {
            type: 'select',
            label: i18n.t('创建方式'),
            key: 'createMethod',
            loading: true,
            placeholder: i18n.t('请选择创建方式'),
            list: [],
            value: ''
        },
        {
            type: 'input',
            key: 'creator',
            label: i18n.t('创建人'),
            placeholder: i18n.t('请输入创建人'),
            value: ''
        },
        {
            type: 'input',
            key: 'executor',
            label: i18n.t('执行人'),
            placeholder: i18n.t('请输入执行人'),
            value: ''
        },
        {
            type: 'select',
            label: i18n.t('状态'),
            key: 'statusSync',
            loading: false,
            placeholder: i18n.t('请选择状态'),
            list: [
                { 'value': 'nonExecution', 'name': i18n.t('未执行') },
                { 'value': 'running', 'name': i18n.t('未完成') },
                { 'value': 'revoked', 'name': i18n.t('撤销') },
                { 'value': 'finished', 'name': i18n.t('完成') }
            ],
            value: ''
        },
        {
            type: 'select',
            label: i18n.t('任务分类'),
            key: 'category',
            loading: true,
            placeholder: i18n.t('请选择分类'),
            list: [],
            value: ''
        }
    ]
    const TABLE_FIELDS = [
        {
            id: 'id',
            label: i18n.t('ID'),
            width: 100
        },
        {
            id: 'name',
            label: i18n.t('任务名称'),
            disabled: true,
            min_width: 240
        },
        {
            id: 'start_time',
            label: i18n.t('执行开始'),
            width: 200
        },
        {
            id: 'finish_time',
            label: i18n.t('执行结束'),
            width: 200
        },
        {
            id: 'create_time',
            label: i18n.t('创建时间'),
            width: 200
        },
        {
            id: 'category_name',
            label: i18n.t('任务类型'),
            width: 100
        },
        {
            id: 'creator_name',
            label: i18n.t('创建人'),
            width: 120
        },
        {
            id: 'executor_name',
            label: i18n.t('执行人'),
            width: 120
        },
        {
            id: 'recorded_executor_proxy',
            label: i18n.t('执行代理人'),
            disabled: true,
            width: 120
        },
        {
            id: 'create_method',
            label: i18n.t('创建方式'),
            width: 100
        },
        {
            id: 'task_status',
            label: i18n.t('状态'),
            width: 120
        },
        {
            id: 'engine_ver',
            label: i18n.t('引擎版本'),
            width: 120
        }
    ]
    export default {
        name: 'TaskList',
        components: {
            Skeleton,
            NoData,
            TaskCreateDialog,
            TaskCloneDialog,
            AdvanceSearchForm
        },
        mixins: [permission, task],
        props: {
            project_id: {
                type: [String, Number],
                default: ''
            }
        },
        data () {
            const {
                page = 1,
                limit = 15,
                template_source = '',
                create_info = '',
                category = '',
                executeTime = '',
                create_method = '',
                creator = '',
                executor = '',
                statusSync = '',
                keyword = ''
            } = this.$route.query
            const searchForm = SEARCH_FORM.map(item => {
                if (this.$route.query[item.key]) {
                    if (Array.isArray(item.value)) {
                        item.value = this.$route.query[item.key].split(',')
                    } else {
                        item.value = this.$route.query[item.key]
                    }
                }
                return item
            })
            const isSearchFormOpen = SEARCH_FORM.some(item => this.$route.query[item.key])
            return {
                firstLoading: true,
                listLoading: false,
                templateId: this.$route.query.template_id,
                taskCategory: [],
                searchStr: '',
                searchForm,
                isSearchFormOpen, // 高级搜索表单默认展开
                executeStatus: [], // 任务执行状态
                totalPage: 1,
                isDeleteDialogShow: false,
                shapeShow: false,
                theDeleteTaskId: undefined,
                theDeleteTaskName: '',
                isTaskCloneDialogShow: false,
                isNewTaskDialogShow: false,
                businessInfoLoading: true, // 模板分类信息 loading
                theCloneTaskName: '',
                theCloneTaskId: undefined,
                pending: {
                    delete: false,
                    clone: false
                },
                taskBasicInfoLoading: true,
                taskCreateMethodList: [],
                createMethod: create_method,
                createInfo: create_info,
                templateSource: template_source,
                requestData: {
                    executeTime: executeTime ? executeTime.split(',') : ['', ''],
                    category,
                    creator,
                    executor,
                    statusSync,
                    createMethod: create_method,
                    taskName: keyword
                },
                pagination: {
                    current: Number(page),
                    count: 0,
                    limit: Number(limit),
                    'limit-list': [15, 30, 50, 100]
                },
                createMethodTabs: [
                    { id: 'all', name: i18n.t('全部') },
                    { id: 'app', name: i18n.t('手动任务') },
                    { id: 'api', name: 'API ' + i18n.t('任务') },
                    { id: 'periodic', name: i18n.t('周期任务') },
                    { id: 'clocked', name: i18n.t('计划任务') }
                ],
                crtCreateMethodTab: 'all', // 当前选中创建方法tab
                tableFields: TABLE_FIELDS,
                defaultSelected: ['id', 'name', 'start_time', 'finish_time', 'executor_name', 'task_status', 'recorded_executor_proxy'],
                setting: {
                    fieldList: TABLE_FIELDS,
                    selectedFields: TABLE_FIELDS.slice(0),
                    size: 'small'
                },
                isCreateDialogShow: false,
                paramsType: 'default',
                selectedRow: {}
            }
        },
        computed: {
            ...mapState({
                taskList: state => state.taskList.taskListData
            }),
            ...mapState('project', {
                'authActions': state => state.authActions,
                'timeZone': state => state.timezone
            })
        },
        async created () {
            this.getFields()
            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
            await this.getData()
            this.firstLoading = false
        },
        methods: {
            ...mapActions('template/', [
                'loadProjectBaseInfo'
            ]),
            ...mapActions('task/', [
                'loadCreateMethod'
            ]),
            ...mapActions('taskList/', [
                'loadTaskList',
                'deleteTask',
                'cloneTask'
            ]),
            ...mapMutations('template/', [
                'setProjectBaseInfo'
            ]),
            ...mapMutations('taskList/', [
                'setTaskListData'
            ]),
            async getTaskList () {
                // 空字符串需要转换为undefined，undefined数据在axios请求发送过程中会被删除
                this.listLoading = true
                this.executeStatus = []
                try {
                    const { executeTime, category, createMethod, creator, executor, statusSync, taskName } = this.requestData
                    let pipeline_instance__is_started
                    let pipeline_instance__is_finished
                    let pipeline_instance__is_revoked
                    switch (statusSync) {
                        case 'nonExecution':
                            pipeline_instance__is_started = false
                            break
                        case 'running':
                            pipeline_instance__is_started = true
                            pipeline_instance__is_finished = false
                            pipeline_instance__is_revoked = false
                            break
                        case 'revoked':
                            pipeline_instance__is_revoked = true
                            break
                        case 'finished':
                            pipeline_instance__is_finished = true
                            break
                    }

                    const data = {
                        limit: this.pagination.limit,
                        offset: (this.pagination.current - 1) * this.pagination.limit,
                        category: category || undefined,
                        template_id: this.templateId || undefined,
                        pipeline_instance__creator__contains: creator || undefined,
                        pipeline_instance__executor__contains: executor || undefined,
                        pipeline_instance__name__icontains: taskName || undefined,
                        pipeline_instance__is_started,
                        pipeline_instance__is_finished,
                        pipeline_instance__is_revoked,
                        create_method: createMethod || undefined,
                        create_info: this.createInfo || undefined,
                        project__id: this.project_id,
                        template_source: this.templateSource || undefined
                    }

                    if (executeTime[0] && executeTime[1]) {
                        if (this.template_source === 'common') {
                            data['pipeline_template__start_time__gte'] = moment(executeTime[0]).format('YYYY-MM-DD')
                            data['pipeline_template__start_time__lte'] = moment(executeTime[1]).add('1', 'd').format('YYYY-MM-DD')
                        } else {
                            data['pipeline_instance__start_time__gte'] = moment.tz(executeTime[0], this.timeZone).format('YYYY-MM-DD')
                            data['pipeline_instance__start_time__lte'] = moment.tz(executeTime[1], this.timeZone).add('1', 'd').format('YYYY-MM-DD')
                        }
                    }
                    const taskListData = await this.loadTaskList(data)
                    const list = taskListData.results
                    this.pagination.count = taskListData.count
                    this.totalCount = taskListData.count
                    const totalPage = Math.ceil(this.pagination.count / this.pagination.limit)
                    if (!totalPage) {
                        this.totalPage = 1
                    } else {
                        this.totalPage = totalPage
                    }
                    // mixins getExecuteStatus
                    this.getExecuteStatus('executeStatus', list)
                    this.setTaskListData(list)
                } catch (e) {
                    console.log(e)
                } finally {
                    this.listLoading = false
                }
            },
            async getBizBaseInfo () {
                try {
                    const res = await this.loadProjectBaseInfo()
                    this.taskCategory = res.data.task_categories
                    this.setProjectBaseInfo(res.data)
                    this.taskBasicInfoLoading = false
                    const form = this.searchForm.find(item => item.key === 'category')
                    form.list = this.taskCategory
                    form.loading = false
                } catch (e) {
                    console.log(e)
                }
            },
            // 获取当前视图表格头显示字段
            getFields () {
                const settingFields = localStorage.getItem('TaskList')
                let selectedFields
                if (settingFields) {
                    const { fieldList, size } = JSON.parse(settingFields)
                    this.setting.size = size || 'small'
                    selectedFields = fieldList || this.defaultSelected
                    if (!fieldList || !size) {
                        localStorage.removeItem('TaskList')
                    }
                } else {
                    selectedFields = this.defaultSelected
                }
                this.setting.selectedFields = this.tableFields.slice(0).filter(m => selectedFields.includes(m.id))
            },
            // 创建方式tab切换
            handleCreateMethodTabClick (method) {
                this.crtCreateMethodTab = method
                if (method !== 'all') {
                    this.searchForm = SEARCH_FORM.filter(item => item.key !== 'createMethod')
                    this.requestData.createMethod = method
                } else {
                    this.searchForm = SEARCH_FORM.slice(0)
                    this.requestData.createMethod = ''
                }
                this.pagination.current = 1
                this.getTaskList()
            },
            searchInputhandler (data) {
                this.requestData.taskName = data
                this.pagination.current = 1
                this.updateUrl()
                this.getTaskList()
            },
            hasCreateTaskPerm (task) {
                const authActions = [...task.auth_actions, ...this.authActions]
                const reqPerm = task.template_source === 'project' ? 'flow_create_task' : 'common_flow_create_task'
                return this.hasPermission([reqPerm], authActions)
            },
            getCreateTaskUrl (task) {
                this.selectedRow = task
                this.isCreateDialogShow = true
            },
            onCreateConfirm () {
                const { id, template_id, template_source } = this.selectedRow
                const taskId = this.paramsType === 'reuse' ? id : undefined
                const url = {
                    name: 'taskCreate',
                    query: { template_id: template_id, task_id: taskId },
                    params: { project_id: this.project_id, step: 'selectnode' }
                }
                if (template_source === 'common') {
                    url.query.common = 1
                }
                this.isCreateDialogShow = false
                this.$router.push(url)
            },
            /**
             * 单个任务操作项点击时校验
             * @params {Array} required 需要的权限
             * @params {Object} task 任务数据对象
             */
            onTaskPermissonCheck (required, task) {
                const resourceData = {
                    task: [{
                        id: task.id,
                        name: task.name
                    }],
                    project: [{
                        id: task.project.id,
                        name: task.project.name
                    }]
                }
                const flowKey = task.template_source === 'project' ? 'flow' : 'common_flow'
                resourceData[flowKey] = [{
                    id: task.template_id,
                    name: task.template_name
                }]
                this.applyForPermission(required, [...task.auth_actions, ...this.authActions], resourceData)
            },
            onDeleteTask (task) {
                if (!this.hasPermission(['task_delete'], task.auth_actions)) {
                    this.onTaskPermissonCheck(['task_delete'], task)
                    return
                }
                this.theDeleteTaskId = task.id
                this.theDeleteTaskName = task.name
                this.isDeleteDialogShow = true
            },
            async onDeleteConfirm () {
                if (this.pending.delete) return
                this.pending.delete = true
                try {
                    await this.deleteTask(this.theDeleteTaskId)
                    this.theDeleteTaskId = undefined
                    this.theDeleteTaskName = ''
                    // 最后一页最后一条删除后，往前翻一页
                    if (
                        this.pagination.current > 1
                        && this.totalPage === this.pagination.current
                        && this.pagination.count - (this.totalPage - 1) * this.pagination.limit === 1
                    ) {
                        this.pagination.current -= 1
                    }
                    await this.getTaskList()
                    this.$bkMessage({
                        message: i18n.t('任务') + i18n.t('删除成功！'),
                        theme: 'success'
                    })
                } catch (e) {
                    console.log(e)
                } finally {
                    this.isDeleteDialogShow = false
                    this.pending.delete = false
                }
            },
            onDeleteCancel () {
                this.theDeleteTaskId = undefined
                this.theDeleteTaskName = ''
                this.isDeleteDialogShow = false
            },
            onCloneTaskClick (task) {
                if (!this.hasPermission(['task_clone'], task.auth_actions)) {
                    this.onTaskPermissonCheck(['task_clone'], task)
                    return
                }
                this.isTaskCloneDialogShow = true
                this.theCloneTaskId = task.id
                this.theCloneTaskName = task.name
            },
            async onCloneConfirm (name) {
                if (this.pending.clone) return
                this.pending.clone = true
                const config = {
                    name,
                    task_id: this.theCloneTaskId
                }
                try {
                    const data = await this.cloneTask(config)
                    this.$router.push({
                        name: 'taskExecute',
                        params: { project_id: this.project_id },
                        query: { instance_id: data.data.new_instance_id }
                    })
                } catch (e) {
                    console.log(e)
                }
            },
            onCloneCancel () {
                this.isTaskCloneDialogShow = false
                this.theCloneTaskName = ''
            },
            onSelectedStatus (id) {
                this.isStarted = id !== 'nonExecution'
                this.isFinished = id === 'finished'
            },
            onClearStatus () {
                this.isStarted = undefined
                this.isFinished = undefined
            },
            // 表格功能选项
            handleSettingChange ({ fields, size }) {
                this.setting.size = size
                this.setting.selectedFields = fields
                const fieldIds = fields.map(m => m.id)
                localStorage.setItem('TaskList', JSON.stringify({
                    fieldList: fieldIds,
                    size
                }))
            },
            renderTableHeader (h, { column, $index }) {
                if (column.property !== 'recorded_executor_proxy') {
                    return column.label
                }

                return h('span', {
                    'class': 'executor_proxy-label'
                }, [
                    column.label,
                    h('i', {
                        'class': 'common-icon-info table-header-tips',
                        directives: [{
                            name: 'bk-tooltips',
                            value: i18n.t('执行代理人在任务开始执行时确定，未执行任务不展示')
                        }]
                    })
                ])
            },
            onPageChange (page) {
                this.pagination.current = page
                this.updateUrl()
                this.getTaskList()
            },
            onPageLimitChange (val) {
                this.pagination.limit = val
                this.pagination.current = 1
                this.updateUrl()
                this.getTaskList()
            },
            updateUrl () {
                const { current, limit } = this.pagination
                const { category, executeTime, createMethod, creator, executor, statusSync, taskName } = this.requestData
                const filterObj = {
                    limit,
                    category,
                    creator,
                    executor,
                    statusSync,
                    createMethod,
                    page: current,
                    executeTime: executeTime.every(item => item) ? executeTime.join(',') : '',
                    keyword: taskName
                }
                const query = {}
                Object.keys(filterObj).forEach(key => {
                    const val = filterObj[key]
                    if (val || val === 0 || val === false) {
                        query[key] = val
                    }
                })
                this.$router.replace({ name: 'taskList', params: { project_id: this.project_id }, query })
            },
            async getCreateMethod () {
                try {
                    const createMethodData = await this.loadCreateMethod()
                    this.taskCreateMethodList = createMethodData.data.map(m => ({ value: m.value, name: m.name }))
                    const form = this.searchForm.find(item => item.key === 'createMethod')
                    form.list = this.taskCreateMethodList
                    form.loading = false
                } catch (e) {
                    console.log(e)
                }
            },
            async getData () {
                Promise.all([
                    this.getTaskList(),
                    this.getCreateMethod(),
                    this.getBizBaseInfo()
                ]).catch(e => {
                    console.log(e)
                })
            },
            transformCreateMethod (value) {
                if (this.taskCreateMethodList.length === 0) {
                    return ''
                }
                const taskCreateMethod = this.taskCreateMethodList.find((taskCreateMethod) => taskCreateMethod['value'] === value)
                return taskCreateMethod['name']
            },
            onCreateTask () {
                this.isNewTaskDialogShow = true
            },
            onCreateTaskCancel () {
                this.isNewTaskDialogShow = false
            },
            onSearchFormSubmit (data) {
                this.requestData = Object.assign({}, this.requestData, data)
                this.pagination.current = 1
                // 高级搜索手动点击时，清空 createInfo、templateId、templateSource 筛选条件
                this.createInfo = ''
                this.templateId = ''
                this.templateSource = ''
                this.updateUrl()
                this.getTaskList()
            }
        }
    }
</script>
<style lang='scss' scoped>
@import '@/scss/config.scss';
@import '@/scss/mixins/advancedSearch.scss';
@import '@/scss/task.scss';
@import '@/scss/mixins/scrollbar.scss';
@include advancedSearch;

.task-container {
    height: 100%;
}
.task-create-method-tabs {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: #ffffff;
    box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, 0.06);
    z-index: 101;
}
.create-method-tab-item {
    margin-right: 17px;
    padding: 0 7px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.active {
        color: #3a84ff;
        border-bottom: 2px solid #3a84ff;
    }
}
.task-content-wrapper {
    padding: 20px 24px;
    height: calc(100% - 36px);
    overflow: auto;
    @include scrollbar;
}
.dialog-content {
    padding: 30px;
    word-break: break-all;
}
.list-wrapper {
    min-height: calc(100vh - 300px);
    .advanced-search {
        margin: 20px 0px;
    }
}
.bk-select-inline {
    width: 260px;
    display: inline-block;
}
.bk-input-inline {
    display: inline-block;
    width: 260px;
}
.common-icon-dark-circle-pause {
    color: #ff9c01;
    font-size: 14px;
    vertical-align: middle;
}
.task-table-content {
    background: #ffffff;
    a.task-name {
        color: $blueDefault;
    }
    .task-status {
       @include ui-task-status;
    }
    .task-operation {
        .task-operation-btn {
            padding: 5px;
            color: #3a84ff;
            font-size: 12px;
            cursor: pointer;
            &.disabled {
                color: #cccccc;
                cursor: not-allowed;
            }
        }
    }
    .empty-data {
        padding: 120px 0;
    }
    .template-operate-btn {
        color: $blueDefault;
    }
    /deep/.table-header-tips {
        margin-left: 4px;
        font-size: 14px;
        color: #c4c6cc;
        cursor: pointer;
    }
}
</style>
<style lang="scss">
    .recreate-dialog {
        .bk-dialog-header {
            padding-bottom: 10px;
        }
        .bk-alert {
            margin-bottom: 26px;
        }
        .bk-form-control {
            display: flex;
            justify-content: space-between;
            padding: 0 24px;
            .bk-form-radio {
                font-size: 12px;
                .icon-question-circle {
                    font-size: 14px;
                }
            }

        }
    }
</style>
